<template>
  <view class="signUp-view">
    <view class="main-view">
      <view class="main-view-box">
        <view >
      <view class="common-view-row">
        <view class="form-item">
          <p class="title-0">小孩</p>
          <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="请选择小孩"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
        </view>

        <view class="form-item">
          <p class="title-0">课程</p>
          <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="请选择课程"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
        </view>
      </view>
      <view class="common-view-row">
        <view class="form-item">
          <p class="title-0">阶梯</p>
          <dropdown-tree-selector
            :treeData="summaryList"
            :multiple="false"
            :selectedIds="searchForm.stageSummaryClass"
            placeholder="请选择小结状态"
            @select="handleSearch($event, 'stageSummaryClass')"
          ></dropdown-tree-selector>
        </view>

        <view class="form-item">
          <p class="title-0">阶段</p>
          <dropdown-tree-selector
            :treeData="hasClassList"
            :multiple="false"
            :selectedIds="searchForm.hasClass"
            placeholder="请选择是否上课"
            @select="handleSearch($event, 'hasClass')"
          ></dropdown-tree-selector>
        </view>
      </view>
    </view>
      </view>
 
      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1重点能力及目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view class="main-view-person-list">
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="main-view-person-list-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
            
              <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="听广度-仿说类"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="走平衡台/平衡木/站半球"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
            <view class="input-box">
              <input disabled placeholder="单脚站30秒" v-model="searchForm.time" />
              <!-- <text>%</text> -->
            </view>
            </view>
          </view>
        </view>
      </view>

      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1非重点能力目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view class="main-view-person-list">
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="main-view-person-list-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
            
              <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="听广度-仿说类"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <dropdown-tree-selector
            :treeData="statusList"
            :multiple="false"
            :selectedIds="searchForm.stageStatus"
            placeholder="走平衡台/平衡木/站半球"
            @select="handleSearch($event, 'stageStatus')"
          ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
            <view class="input-box">
              <input disabled placeholder="单脚站30秒" v-model="searchForm.time" />
              <!-- <text>%</text> -->
            </view>
            </view>
          </view>
        </view>
      </view>
<!-- L1行为习惯目标 -->
      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1行为习惯目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view >
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="single-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>   
            <view class="select-box">
            <view class="input-box">
              <input  placeholder="请输入行为习惯目标" v-model="searchForm.time" />
              <!-- <text>%</text> -->
            </view>
            </view>
          </view>
        </view>
      </view>
<!-- L1家庭教育目标 -->
      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1家庭教育目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view >
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="single-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>   
            <view class="select-box">
            <view class="input-box">
              <input  placeholder="让孩子自己整理学习用具(书桌和书包)包" v-model="searchForm.time" />
              <!-- <text>%</text> -->
            </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-height"></view>

<view class="footer-submit flex-center">
  <view class="submit-btn"  @click="toPage('/pages/stage-plan/add')"> 提交保存</view>
</view>
  </view>
</template>

<script>
import DropdownTreeSelector from "@/components/dropdown-tree-selector/dropdown-tree-selector.vue";
import { listChild } from "@/api/stagePlan/stagePlan.js";
export default {
  components: { DropdownTreeSelector },
  data() {
    return {
      searchForm: {
        childName: "", //小孩名字
        stageStatus: "", //阶段状态：0-进行中，1-已完成，2-需复测
        stageSummaryClass: "", //小结状态：0-全部，1-需要小结
        hasClass: "", //是否有上课：0-没有，1-有
      },
      statusList: [
        {
          id: 0,
          label: "进行中",
        },
        {
          id: 1,
          label: "待复测",
        },
        {
          id: 2,
          label: "已完成",
        },
      ],
      summaryList: [
        {
          id: 0,
          label: "全部",
        },
        {
          id: 1,
          label: "需要小结",
        },
      ],
      hasClassList: [
        {
          id: 0,
          label: "没有",
        },
        {
          id: 1,
          label: "有",
        },
      ],
      list: [],
      personList:[{
    personId: '',
    value: ''
  }]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addPerson(){
      this.personList.push({
    personId: '',
    value: ''
  })
    },
    delPerson (index ) {
  this.personList.splice(index, 1)
},
    getList() {
      let data = this.searchForm;
      listChild(data).then((res) => {
        this.list = res.rows;
      });
    },
    handleSearch(val, field) {
      this.searchForm[field] = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  ::v-deep .uni-select {
    font-size: pxtovw(32);
    padding: pxtovw(10) pxtovw(30);
    height: pxtovw(96);
    border-radius: pxtovw(20);
    .uni-select__input-box {
      font-size: pxtovw(32);
      height: pxtovw(65);
      .uni-select__input-placeholder {
        font-size: pxtovw(30);
      }
    }
    .uni-icons {
      font-size: pxtovw(30) !important;
    }
  }
  ::v-deep .uni-page-wrapper {
    height: auto;
  }
}
.signUp-view {
  .main-view {
    padding: pxtovw(30) pxtovw(34);
    .main-view-box {
      background-color: #fff;
      padding: pxtovw(40) pxtovw(34);
      border-radius: pxtovw(20);
      margin-bottom: pxtovw(30);
      .main-view-select {
        text {
          color: #1e1b3a;
          font-size: pxtovw(30);
          font-weight: 500;
        }
        view {
          margin-top: pxtovw(20);
          width: pxtovw(600);
          height: pxtovw(96);
          border-radius: pxtovw(20);
        }
      }
      .main-view-msg {
        display: flex;
        background-color: #ebf8f7;
        padding: pxtovw(30);
        border-radius: pxtovw(20);
        margin-top: pxtovw(30);
        view {
          font-size: pxtovw(30);
          margin-right: pxtovw(90);
          text {
            font-size: pxtovw(30);
            color: #30b3ab;
          }
        }
      }
      .main-view-input {
        display: flex;
        margin-top: pxtovw(40);
        view {
          text {
            color: #1e1b3a;
            font-weight: 500;
            font-size: pxtovw(30);
          }
        }
        .main-view-input-one {
          margin-right: pxtovw(32);
          view {
            display: flex;
            width: pxtovw(600);
            height: pxtovw(96);
            border: 1px solid #d9d9d9;
            border-radius: pxtovw(20);
            padding-left: pxtovw(30);
            align-items: center;
            margin-top: pxtovw(20);
            input {
              height: pxtovw(58);
              width: 80%;
              font-size: pxtovw(30);
              border-right: 2px solid #d9d9d9;
              margin-right: pxtovw(30);
            }
            text {
              color: #666666;
            }
          }
        }
        .main-view-input-two {
          width: 100%;
          view {
            display: flex;
            width: 97%;
            height: pxtovw(96);
            border: 1px solid #d9d9d9;
            border-radius: pxtovw(20);
            padding-left: pxtovw(30);
            align-items: center;
            margin-top: pxtovw(20);
            input {
              height: pxtovw(58);
              width: 80%;
              font-size: pxtovw(30);
              margin-right: pxtovw(30);
            }
          }
        }
      }
    }
    .main-view-person {
      display: flex;
      align-items: center;
      text {
    

font-weight: bold;
font-size: pxtovw(30);
color: #1E1B3A;

      }
      view {
        width: 137px;
        height: 66px;
        border: 1px solid #30b3ab;
        font-size: pxtovw(24);
        color: #30b3ab;
        background-color: #ebf8f7;
        border-radius: 8px;
        margin-left: pxtovw(20);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .main-view-person-list {
      margin-top: pxtovw(28);
      display: flex;
      flex-wrap: wrap;
   
      .main-view-person-list-box {
        margin-bottom: pxtovw(30);

        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        border: 1px solid #30B3AB;
        border: 1px dashed #30b3ab;
        border-radius: pxtovw(20);
        padding: pxtovw(30);
        margin-right: pxtovw(16);
        position: relative;
        width: 32%;
        .delete-icon {
          position: absolute;
          right: -13px;
          top: -17px;
        }
        .sub-title{

font-weight: 500;
font-size: pxtovw(28);
color: #666666;
padding:pxtovw(0) pxtovw(0) pxtovw(20) pxtovw(0)

        }
        .select-box{
          margin-top: pxtovw(20);
        }
        .input-box {
          border: 1px solid #d9d9d9;
          border-radius: pxtovw(20);
          display: flex;
          height: pxtovw(98);
          align-items: center;
          padding-left: pxtovw(30);
         
          input {
            height: pxtovw(58);
            width: 100%;
            font-size: pxtovw(30);
            margin-right: pxtovw(30);
            // border-right: 2px solid #d9d9d9;
          }
          text {
            font-size: pxtovw(30);
          }
        }
      }
    }
    .good-view {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-top: pxtovw(30);
      .good-view-box {
        width: 29%;
        border: 1px dashed #30b3ab;
        border-radius: pxtovw(20);
        display: flex;
        padding: pxtovw(30);
        position: relative;
        align-items: center;
        text {
          font-size: pxtovw(30);
          color: #1e1b3a;
        }
        .input-box {
          border: 1px solid #d9d9d9;
          border-radius: pxtovw(20);
          display: flex;
          height: pxtovw(98);
          align-items: center;
          padding-left: pxtovw(30);
          width: 55%;
          margin-left: pxtovw(30);
          input {
            height: pxtovw(58);
            font-size: pxtovw(30);
          }
        }
        .delete-icon {
          position: absolute;
          right: -pxtovw(16);
          top: -18px;
        }
      }
    }
    .notes-box {
      margin-top: pxtovw(40);
      text {
        color: #1e1b3a;
        font-size: pxtovw(30);
      }
      .notes-length {
        margin-left: pxtovw(24);
        text {
          color: #30b3ab !important;
        }
      }
    }
    .notes-view {
      margin-top: pxtovw(10);
      border: 1px solid #d9d9d9;
      border-radius: pxtovw(20);
      padding: pxtovw(30) pxtovw(24);
      .textarea {
        font-size: pxtovw(32);
      }
      uni-textarea {
        width: 100%;
      }
      .uni-textarea-placeholder {
        font-size: pxtovw(32);
        width: 100%;
      }
      .uni-textarea-textarea {
        font-size: pxtovw(32);
      }
      view {
        text-align: right;
        margin-right: pxtovw(10);
        .textarea {
          font-size: pxtovw(32);
          width: 100%;
        }
      }
    }
  }
  .downBtn-view {
    display: flex;
    justify-content: space-between;
    height: pxtovw(128);
    height: 100%;
    background-color: #fff;
    padding: 0px pxtovw(34);

    view {
      display: flex;
      align-items: center;
      height: pxtovw(128);
      font-size: pxtovw(36);
      color: #1e1b3a;
      &:last-child {
        width: 444px;
        height: 99px;
        background: #30b3ab;
        border-radius: pxtovw(60);
        color: #fff;
        justify-content: center;
        margin-top: pxtovw(14);
      }
    }
  }
}
.common-view {
  flex-direction: column;
}
.common-view-row {
  width: 100%;
  display: flex;
}
.common-view-title {
  display: flex;
  align-items: center;
}
.form-item {
  width:pxtovw(600);
  margin-bottom: pxtovw(40); /* 根据需要调整 */
  margin-right: pxtovw(32);
}
.single-box {
  position: relative;
  padding-top: pxtovw(30);
  .delete-icon {
          position: absolute;
          right: -13px;
          top: 0px;
        }
}
.input-box {
          border: 1px solid #d9d9d9;
          border-radius: pxtovw(20);
          display: flex;
          height: pxtovw(98);
          align-items: center;
          padding-left: pxtovw(30);
         
          input {
            height: pxtovw(58);
            width: 100%;
            font-size: pxtovw(30);
            margin-right: pxtovw(30);
            // border-right: 2px solid #d9d9d9;
          }
          text {
            font-size: pxtovw(30);
          }
        }
</style>